<template>
  <div class="preview" ref="preview">
    <group>
      <cell title="亲友圈名称" :value="clubValue.clubName" link="title?mode=edit">
        <img slot="icon" src="../../../images/icon_S01.png" alt="图片">
      </cell>
    </group>
    <group>
      <cell title="游戏名称" :value="clubValue.activityName" :link="canedit? 'gametypes?mode=edit' : ''">
        <img slot="icon" src="../../../images/icon_S03.png" alt="图片">
      </cell>
      <cell title="收费模式" :value="costMode">
        <img slot="icon" src="../../../images/icon_S04.png" alt="图片">
      </cell>
      <cell title="亲友圈成员保护" :value="clubAuthor" :link="'switch?clubId=' + clubId">
        <img slot="icon" src="../../../images/icon_S05.png" alt="图片">
      </cell>
    </group>
    <group>
      <cell title="已选规则" is-link @click.native="jump()">
        <img slot="icon" src="../../../images/icon_S06.png" alt="图片">
      </cell>
      <p class="preview_rule">{{selectRules}}</p>
    </group>
    <group>
      <cell title="亲友圈公告" link="tips?mode=edit">
        <img slot="icon" src="../../../images/icon_S07.png" alt="图片">
      </cell>
      <p class="preview_rule">{{clubValue.describe}}</p>
    </group>
    <x-button v-if="canedit" class="finishBtn" type="primary" @click.native="finish">完成</x-button>
    <div class="preview_oepn" v-if="!canedit">
      <button @click="showList">{{clubStatusName[clubValue.status - 1]}}</button>
    </div>
    <div @click="hideList" class="preview_open_list_cover" v-if="showOpenList">
      <div class="preview_open_list">
        <p v-for="(name,index) in clubStatusName" @click="statusSelect(index)">{{name}}</p>
      </div>
    </div>
  </div>
</template>
<script>
import { Cell, Group, XButton } from "vux";
export default {
  data() {
    return {
      costMode: "",
      clubAuthor: "",
      selectRules: "",
      canedit: true,
      showOpenList: false,
      clubStatusName: ["开启", "暂停", "删除"],
      clubId: "",
      clubValue: {}
    };
  },
  components: {
    Cell,
    Group,
    XButton
  },
  created() {
    /**
     * 分两种情况
     * 1. 创建亲友圈时候的预览
     * 2. 亲友圈创建完成时的编辑,当是编辑的功能时，存在一个开关亲友圈的按钮
     * 通过url上有无mode属性来判断，当mode属性为edit时表示时编辑。需要将编辑的功能传递到下一层页面。
     */
    //判断是否时编辑
    this.clubValue = this.apiService.getSessionData("clubValue");
    let mode = location.href.split("?")[1];
    if (mode) {
      this.canedit = false;
      this.clubId = this.clubValue.clubId;
    }
    this.clubAuthor =
      this.clubValue.whiteListType == 1 ? "已启用白名单" : "未启用白名单";
    //收费模式
    this.costMode = this.clubValue.costType == 1 ? "亲友圈付费" : "AA付费";
    //已选规则
    let quanOrju = "局，";
    let finalRound;
    if (this.clubValue.userset.round) {
      finalRound = this.clubValue.userset.round;
    } else {
      finalRound = JSON.parse(this.clubValue.userset).round;
    }
    if (finalRound.toString().includes("X")) {
      quanOrju = "圈，";
      finalRound = finalRound.split("X")[1];
    }
    let tuolajiDict = {
      1000: "2-5",
      1001: "2-8",
      1002: "2-J",
      1003: "2-A"
    };
    if (this.clubValue.activityId == 200001) {
      quanOrju = "";
      if (this.clubValue.userset.round) {
        finalRound = tuolajiDict[this.clubValue.userset.round] + "，";
      } else {
        finalRound =
          tuolajiDict[JSON.parse(this.clubValue.userset).round] + "，";
      }
    }
    this.selectRules =
      finalRound + quanOrju + this.clubValue.ruler.split("invitedesc=")[1];
  },
  mounted() {
    if (!this.canedit) {
      this.$refs.preview.classList.add("preview_edit");
    }
  },
  beforeRouteLeave(to, from, next) {
    this.apiService.setSessionData("clubValue", this.clubValue);
    next();
  },
  methods: {
    jump() {
      this.$router.push("gamerule?mode=edit");
    },
    finish() {
      /**
       * 本页面包含创建亲友圈和编辑亲友圈两部分的内容
       * 1. 可编辑的状态，那么就是编辑
       * 2. 不可编辑的状态，那么就不会编辑
       * 两次所传的数据是一样的
       */
      let whiteListIds = [];
      if (sessionStorage.getItem("white")) {
        let whiteList = JSON.parse(sessionStorage.getItem("white"));
        whiteList.map(item => {
          whiteListIds.push(item.id);
        });
      }
      let blackListIds = [];
      if (sessionStorage.getItem("black")) {
        let blackList = JSON.parse(sessionStorage.getItem("black"));
        blackList.map(item => {
          blackListIds.push(item.id);
        });
      }
      let clubAuthorAllow = this.clubValue.whiteListType;
      if (whiteListIds.length > 0) {
        clubAuthorAllow = "1";
      }
      let reqdata = {
        activityid: this.clubValue.activityId,
        clubname: this.clubValue.clubName,
        cost: this.clubValue.cost,
        costtype: this.clubValue.costType,
        describe: this.clubValue.describe,
        minplayer: this.clubValue.minPlayer,
        notallowsameip: this.clubValue.notAllowSameIp,
        allowsamelocation: this.clubValue.allowSameLocation,
        whitelisttype: clubAuthorAllow,
        round: this.clubValue.round,
        ruler: this.clubValue.ruler,
        userset: this.clubValue.userset,
        waittime: this.clubValue.waitTime,
        listInfo: {
          white: whiteListIds,
          black: blackListIds
        }
      };
      if (this.clubValue.playerCount) {
        reqdata.playerCount = this.clubValue.playerCount;
      }
      this.apiService.club.createclub(reqdata).then(result => {
        this.$router.push("../../club");
        // 去除掉本地的缓存
        sessionStorage.removeItem("white");
        sessionStorage.removeItem("black");
        this.apiService.removeSessionData("clubValue");
      });
    },
    showList() {
      this.showOpenList = !this.showOpenList;
    },
    hideList() {
      this.showOpenList = !this.showOpenList;
    },
    statusSelect(index) {
      let lastStatus = this.clubValue.status;
      this.clubValue.status = index + 1;
      let setting = () => {
        this.apiService.club
          .editclub({
            clubid: this.clubValue.clubId,
            status: this.clubValue.status
          })
          .then(res => {
            this.showOpenList = false;
            if (this.clubValue.status == 3) {
              this.$router.push("../clubhome");
            }
          })
          .catch(() => {
            this.clubValue.status = lastStatus;
          });
      };

      if (this.clubValue.status == 3) {
        let that = this;
        this.$vux.confirm.show({
          content: "确定要删除亲友圈么?",
          onConfirm() {
            setting();
          },
          onCancel() {
            that.clubValue.status = lastStatus;
          }
        });
      } else {
        setting();
      }
    }
  }
};
</script>

<style>
.preview::before {
  content: "";
  display: table;
}
.preview_edit {
  padding-top: 0.3rem;
}
.preview {
  position: relative;
  height: 100%;
}
.preview .vux-label {
  font-size: 0.3rem;
}
.weui-cell__ft {
  font-size: 0.3rem;
}
.preview_oepn {
  position: absolute;
  right: 0.3rem;
  top: 0.1rem;
}
.preview_oepn button {
  background-color: #2abd6a;
  border-radius: 0.05rem;
  color: #fff;
  height: 0.41rem;
  width: 1.25rem;
  font-size: 0.3rem;
}
.preview_open_list_cover {
  position: absolute;
  top: 0.5rem;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  text-align: right;
}
.preview_open_list {
  background-color: rgb(200, 200, 200);
  width: 1.25rem;
  display: inline-block;
  margin-right: 0.3rem;
}
.preview_open_list p {
  border-bottom: 0.01rem solid rgb(100, 100, 100);
  padding: 0.05rem 0;
  text-align: center;
}
.preview img {
  transform: translateY(9%);
  width: 0.58rem;
}
.preview_rule {
  font-size: 0.3rem;
  padding: 0 0.5rem 0.2rem 1.2rem;
  word-break: break-all;
}
.finishBtn {
  margin-top: 0.4rem;
}
</style>

